<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>Sin人员管理系统</h2>
        <p>
          Sin人员管理系统是一款基于若依框架并融合二次创作的综合性软件，集成了多种人力资源管理功能，旨在帮助企业和组织有效管理员工信息、优化人力资源流程、提升工作效率。该系统通过自动化和数字化手段，简化了从员工入职到离职的整个流程，减少了管理成本，并提供了准确、实时的数据支持决策。
        </p>
        <p>
          <b>Sin人员管理系统版本:</b> <span>v1.0</span><br>
          <b>若依版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-takeaway-box"
            plain
            @click="goTarget('https://github.com/uuo00n/Enterprise-Personnel-Management-System')"
          >访问github仓库
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-takeaway-box"
            plain
            @click="goTarget('https://gitee.com/huang-junbo/Enterprise-Personnel-Management-System')"
          >访问gitee仓库
          </el-button
          >
          <el-button
            size="mini"
            icon="el-icon-link"
            plain
            @click="goTarget('http://120.46.212.36/')"
          >访问作者博客
          </el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>开发团队</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>数据库设计</h4>
            <ul>
              <li>黄俊博</li>
              <li>李世博</li>
              <li>陈凯乐</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端开发</h4>
            <ul>
              <li>黄俊博</li>
              <li>滕东峻</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>后端开发</h4>
            <ul>
              <li>黄俊博</li>
              <li>李世博</li>
              <li>郎健伟</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>软件测试</h4>
            <ul>
              <li>李世博</li>
              <li>季峰</li>
              <li>战庆贤</li>
              <li>王磊</li>
              <li>巨杰</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>技术选型</span>
          </div>
          <div class="body">
            <i class="el-icon-s-platform"></i>前端技术
            <p>
              <a href="https://nodejs.org/" target="_blank"><img style="margin: 10px"
                                                                 src="https://profilinator.rishav.dev/skills-assets/nodejs-original-wordmark.svg"
                                                                 alt="Node.js" height="50"
              /></a>
              <a href="https://vuejs.org/" target="_blank"><img style="margin: 10px"
                                                                src="https://profilinator.rishav.dev/skills-assets/vuejs-original-wordmark.svg"
                                                                alt="Vue.js" height="50"
              /></a>
              <a href="https://element.eleme.cn/" target="_blank"><img style="margin: 10px"
                                                                       src=""
                                                                       alt="elementUI.js" height="50"
              /></a>
              <a href="https://axios-http.com/" target="_blank"><img style="margin: 10px"
                                                                     src="https://avatars.githubusercontent.com/u/32372333?s=200&v=4"
                                                                     alt="axios" height="50"
              ></a>
              <a href="https://sass-lang.com/" target="_blank"><img style="margin: 10px"
                                                                    src="https://sass-lang.com/assets/img/logos/logo.svg"
                                                                    alt="sass" height="50"
              ></a>
            </p>
            <i class="el-icon-s-tools"></i>后端技术
            <p>
              <a
                href="https://spring.io/"
                target="_blank"
              ><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/springio-icon.svg"
                    alt="Spring"
                    height="50"
              /></a>
              <a href="https://mybatis.org/" target="_blank"><img style="margin: 10px"
                                                                  src="https://avatars.githubusercontent.com/u/1483254?s=200&v=4"
                                                                  alt="mybatis" height="50"
              /></a>
              <a href="https://jwt.io/" target="_blank"><img style="margin: 10px"
                                                             src="https://jwt.io/img/icon.svg"
                                                             alt="JWT" height="50"
              ></a>

              <a href="https://github.com/alibaba/fastjson2" target="_blank"><img style="margin: 10px"
                                                                                  src="https://avatars.githubusercontent.com/u/1961952?s=200&v=4"
                                                                                  alt="Fastjson" height="50"
              ></a>
            </p>
            <i class="el-icon-cpu"></i>开发工具
            <p>
              <a href="https://gitee.com/" target="_blank"><img style="margin: 10px"
                                                                src="https://www.svgrepo.com/show/330508/gitee.svg"
                                                                alt="IDEA" height="50"
              ></a>
              <a href="https://www.jetbrains.com/zh-cn/idea/" target="_blank"><img style="margin: 10px"
                                                                                   src="https://www.svgrepo.com/show/452236/jb-intellij-idea.svg"
                                                                                   alt="IDEA" height="50"
              ></a>
              <a href="https://www.jetbrains.com/zh-cn/webstorm/" target="_blank"><img style="margin: 10px"
                                                                                       src="https://www.svgrepo.com/show/354555/webstorm.svg"
                                                                                       alt="WebStorm" height="50"
              ></a>
              <a href="https://code.visualstudio.com/" target="_blank"><img style="margin: 10px"
                                                                            src="https://www.svgrepo.com/show/374171/vscode.svg"
                                                                            alt="WebStorm" height="50"
              ></a>
              <a href="https://www.sublimetext.com/" target="_blank"><img style="margin: 10px"
                                                                          src="https://www.svgrepo.com/show/349520/sublimetext.svg"
                                                                          alt="WebStorm" height="50"
              ></a>
              <a href="https://www.navicat.com/en/" target="_blank"><img style="margin: 10px"
                                                                         src="https://static-00.iconduck.com/assets.00/navicat-icon-512x506-yu2kce7d.png"
                                                                         alt="WebStorm" height="50"
              ></a>
              <a href="https://www.postman.com/" target="_blank"><img style="margin: 10px"
                                                                      src="https://www.svgrepo.com/show/354202/postman-icon.svg"
                                                                      alt="WebStorm" height="50"
              ></a>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="48" :sm="48" :md="24" :lg="16">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>成员分布</span>
          </div>
          <div class="body">
            <div ref="chart" style="width: 100%; height: 412px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '3.8.7'
    }
  },
  mounted() {
    this.setCharts()
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    setCharts() {
      var chartDom = this.$refs.chart
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: 'Sin-人员管理系统开发小组',
          subtext: '开发人员分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 3, name: '数据库设计' },
              { value: 2, name: '前端开发' },
              { value: 3, name: '后端开发' },
              { value: 5, name: '软件测试' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

